<template>
    <div class="section">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>自动问答机器人</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="message-box">
                <el-row
                    v-for="(message, index) in messages"
                    :key="index"
                    class="myrow"
                    :style="'text-align:' + message.flag"
                >
                    <span v-bind:class="message.flag + ' message'">{{ message.msg }}</span>
                </el-row>
            </div>
            <div>
                <el-form>
                    <el-row>
                        <el-col :span="22">
                            <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary" class="align-right">发送</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "AutoQA",
    data() {
        return {
            messages: [
                {
                    msg: "您好，有什么能帮助您的吗",
                    flag: "left"
                },
                {
                    msg: "明天的天气怎么样",
                    flag: "right"
                },
                {
                    msg:
                        "明天多云天气，气温24度，西风1级，湿度大约43%，空气质量42，注意戴口罩~",
                    flag: "left"
                },
                {
                    msg: "好的，谢谢",
                    flag: "right"
                },
                {
                    msg: "不客气~",
                    flag: "left"
                },
                {
                    msg: "寒露风是什么？",
                    flag: "right"
                },
                {
                    msg: "每年秋季“寒露”节气前后，是华南晚稻抽穗扬花的关键时期，这时如遇低温危害，就会造成空壳、瘪粒，导致减产，通常称为“寒露风”。",
                    flag: "left"
                }
            ],
            input: ""
        };
    }
};
</script>

<style scoped>
.section {
    padding: 10px;
}

.myrow {
    padding: 5px;
    margin: 8px 0 8px 0;
}

.message-box {
    width: 100%;
    min-height: 400px;
    margin-bottom: 30px;
    padding: 8px;
    border: 1px solid #dddddd;
}

.message {
    border: 1px solid #f7f7f7;
    border-radius: 5px;
    padding: 10px 15px 10px 15px;
}

.left {
    background-color: #eeeeee;
}

.right {
    background-color: #2683f5;
    color: #ffffff;
}

.align-right {
    float: right;
}
</style>